<script setup>
import { ref } from 'vue'

const formModel = ref({
    uname: '',
    password: '',
})
const rules = ref({
    uname: [
        { required: true, message: '必须输入名称', trigger: 'blur'}
    ],
    password: [
        { required: true, message: '必须输入密码', trigger: 'blur'}
    ]
})
</script>
<template>
    <div class="root">
        <div class="grid">
            <div class="left">
                <el-image
                    style="width: auto; "
                    src="/src/assets/images/login-bg.jpg" alt="">
                    
                </el-image>
                <div>
                    <el-text type="Info">
                        <h1>欢迎来到蓝桥社区</h1>
                    </el-text>
                </div>
            </div>
            <div class="right">
                <el-card style="height: 100%;">
                    <el-form :rules="rules" :model="formModel">
                        <el-form-item prop="uname">
                            <el-input v-model="formModel.name" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="formModel.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="top">
                                <div>
                                    <el-button @click="this.$router.push('/layout')" plain type="primary">登录</el-button>
                                </div>
                                <div>
                                    <el-checkbox label="记住密码"></el-checkbox>
                                    <el-checkbox label="自动登录"></el-checkbox>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-link href="/layout">返回首页</el-link>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
    .root {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 1rem;
        width: 80vw;
        height: 80vh;
        .left {
            grid-area: 2 / 1 / 4 / 3;
        }
        .right {
            grid-area: 2 / 3 / 4 / 5;
        }
    }
    
    @media screen and (min-width: 1034px) {
        .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 1rem;
            width: 80vw;
            height: 80vh;
            .left {
                grid-area: 2 / 1 / 4 / 3;
            }
            .right {
                grid-area: 2 / 3 / 4 / 5;
            }
        }
    }
    @media screen and (max-width: 1034px) {
        .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 1rem;
            width: 80vw;
            height: 80vh;
            .left {
                grid-area: 1 / 2 / 4 / 5;
            }
            .right {
                grid-area: 4 / 2 / 5 / 5;
                z-index: 2;
            }
        }
    }
</style>